<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>欢迎使用 DODOKE Cake 后台管理系统</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../assets/css/theme.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/admin-forms.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body class="admin-validation-page" data-spy="scroll" data-target="#nav-spy" data-offset="200">
<div id="main">
    <header class="navbar navbar-fixed-top navbar-shadow">
        <div class="navbar-branding">
            <a class="navbar-brand" href="#">
                <H3>Love Cake 后台管理系统</H3>
            </a>
            <span id="toggle_sidemenu_l" class="ad ad-lines"></span>
        </div>
    </header>
    <aside id="sidebar_left" class="nano nano-light affix">
        <div class="sidebar-left-content nano-content">
            <header class="sidebar-header">
                <div class="sidebar-widget author-widget">
                    <div class="media">
                        <a class="media-left" href="#">
                            <img src="../images/head.jpg" class="img-responsive">
                        </a>
                        <div class="media-body">
                            <div class="media-author">管理员</div>
                            <div class="media-links">
                                <a href="/view/login">退出</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sidebar-widget search-widget hidden">
                    <div class="input-group">
                        <span class="input-group-addon">
                        <i class="fa fa-search"></i>
                        </span>
                        <input type="text" id="sidebar-search" class="form-control" placeholder="Search...">
                    </div>
                </div>
            </header>
            <ul class="nav sidebar-menu">
                <li class="sidebar-label pt20">商品管理</li>
                <li class="active">
                    <a href="/view/cake_list">
                        <span class="glyphicon glyphicon-book"></span>
                        <span class="sidebar-title">商品列表</span>
                    </a>
                </li>
                <li>
                    <a href="/view/cake_add">
                        <span class="glyphicon glyphicon-home"></span>
                        <span class="sidebar-title">商品上架</span>
                    </a>
                </li>
                <li class="sidebar-label pt20">分类管理</li>
                <li class="active">
                    <a href="/view/catalog_list" oncick="getPageData()">
                        <span class="glyphicon glyphicon-book"></span>
                        <span class="sidebar-title">分类列表</span>
                    </a>
                </li>
                <li>
                    <a href="/view/catalog_add">
                        <span class="glyphicon glyphicon-home"></span>
                        <span class="sidebar-title">添加分类</span>
                    </a>
                </li>
            </ul>
            <div class="sidebar-toggle-mini">
                <a href="/view/login">
                    <span class="fa fa-sign-out"></span>
                </a>
            </div>
        </div>
    </aside>
<section id="content_wrapper">
    <section id="content" class="table-layout animated fadeIn">
        <div class="tray tray-center">
            <div class="content-header">
                <h2> 蛋糕管理</h2>
                <p class="lead"></p>
            </div>
            <div class="admin-form theme-primary mw1000 center-block" style="padding-bottom: 175px;">
                <div class="panel  heading-border">
                    <div class="panel-menu">
                        <div class="row">
                            <div class="hidden-xs hidden-sm col-md-3">
                                <div class="btn-group">
                               		 <!-- 删除按钮 -->
                                    <button type="button" class="btn btn-default light" onclick="batchDel()">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                    <!-- 添加按钮 -->
                                    <button type="button" class="btn btn-default light" onclick="javascrtpt:window.location.href='/cake/addCake2'">
                                        <i class="fa fa-plus" ></i>
                                    </button>
                                </div>
                            </div>
                            <div class="col-xs-12 col-md-9 text-right">

                                共<span id="count"></span>条 <span id="inpage">1</span>/<span id="allpage"></span>
                                <div class="btn-group">
                                    <button type="submit" name="pageNum" value="0" class="btn btn-default light" onclick="getPageData(1,0)">
                                        <i class="fa fa-chevron-left"></i>
                                    </button>
                                    <button type="submit" name="pageNum" value="2" class="btn btn-default light" onclick="getPageData(0,1)">
                                        <i class="fa fa-chevron-right"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body pn">
                        <table id="message-table" class="table admin-form theme-warning tc-checkbox-1">
                            <thead>
                            <tr class="">
                                <th class="text-center hidden-xs">Select</th>
                                <th class="hidden-xs">名称</th>
                                <th class="hidden-xs">类型</th>
                                <th class="hidden-xs">价格</th>
                                <th class="hidden-xs">口味</th>
                                <th class="hidden-xs">尺寸</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="cakePageList">
                               <!--  <tr class="message-unread">
                                    <td class="hidden-xs">
                                        <label class="option block mn">
                                            <input type="checkbox" name="mobileos" value="FR">
                                            <span class="checkbox mn"></span>
                                        </label>
                                    </td>
                                    <td>深艾尔</td>
                                    <td>复古</td>
                                    <td>268.00</td>
                                    <td>奶油</td>
                                    <td>12</td>
                                    <td>
                                        <a href="cake_info.jsp?id=200">查看</a>
                                        <a href="cake_add.jsp?id=200">编辑</a>
                                        <a href="cake_list.jsp?id=200">删除</a>
                                    </td>
                                </tr> -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
</section>

</div>
<style>
    /* demo page styles */
    body { min-height: 2300px; }

    .content-header b,
    .admin-form .panel.heading-border:before,
    .admin-form .panel .heading-border:before {
        transition: all 0.7s ease;
    }
    /* responsive demo styles */
    @media (max-width: 800px) {
        .admin-form .panel-body { padding: 18px 12px; }
    }
</style>

<style>
    .ui-datepicker select.ui-datepicker-month,
    .ui-datepicker select.ui-datepicker-year {
        width: 48%;
        margin-top: 0;
        margin-bottom: 0;

        line-height: 25px;
        text-indent: 3px;

        color: #888;
        border-color: #DDD;
        background-color: #FDFDFD;

        -webkit-appearance: none; /*Optionally disable dropdown arrow*/
    }
</style>

<!-- jQuery -->
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/jquery-ui.min.js"></script>
<!-- Theme Javascript -->
<script src="../assets/js/utility.js"></script>
<script src="../assets/js/demo/demo.js"></script>
<script src="../assets/js/main.js"></script>
<script src="../assets/js/pages.js"></script>
<!-- END: PAGE SCRIPTS -->
</body>
<script type="text/javascript" src="static/js/jquery-3.5.1.js"></script>
<script type="text/javascript">
	function getPageData(prepage,nextpage) {
		var nextPage = 1;
		var allPage = parseInt($("#allpage").text());
		var nowPage = parseInt($("#inpage").text());
		if(prepage != 0 || nextpage != 0) {
			if(prepage == 0 && nextpage == 1) {
				nextPage = nowPage + 1;
				if(nextPage > allPage) {
					alert("已经到最后一页了");
					
					return;
				} else {
					$("#inpage").text(nextPage);
				}
			} else if(prepage == 1 && nextpage == 0) {
				nextPage = nowPage - 1;
				if(nextPage < 1) {
					alert("正在首页");
					return;
				} else {
					$("#inpage").text(nextPage);
				}
			}
		}
		var obj = {
				"nextPage":nextPage
			}
		$.ajax({
			async:true,
			url:"/cake/getPageData",
			type:"post",
			data:obj,
			dataType:"json",
			success:function(data) {
				console.log(data.result.data[0].id);
				var pageCount = data.result.allPage;
				var count = data.result.data.length;
				$("#allpage").text(pageCount);
				$("#count").text(count);
				//删除的目的在于添加前先进行清空，达到翻页效果
				$('#cakePageList').empty();
				for(var i = 0;i<data.result.data.length;i++) {
					var str = "<tr class='essage-unread'>";
					var id = data.result.data[i].id;
					str += "<td class='hidden-xs'>";
					str += "<label class='option block mn'>";
					str += "<input type='checkbox' name='mobileos' value='FR' id='"+ id +"'>";
					str += "<span class='checkbox mn'></span></label></td>";
					str += "<td>"+ data.result.data[i].cakeName +"</td>";
					str += "<td>"+ data.result.data[i].cakeType +"</td>";
					str += "<td>"+ data.result.data[i].price +"</td>";
					str += "<td>"+ data.result.data[i].taste +"</td>";
					str += "<td>"+ data.result.data[i].size +"</td>";
					str += "<td><a href='cake_info.jsp?name="+id+"&cake_name="+data.result.data[i].cakeName+"&taste="+data.result.data[i].taste+"&cake_type="+data.result.data[i].cakeType+"&price="+data.result.data[i].price+"&weight="+data.result.data[i].weight+"&size="+data.result.data[i].size+"&pic_url="+data.result.data[i].picUrl+"&ingredient="+data.result.data[i].ingredient+"'>查看</a>";
					str += "<a href='cake_add.jsp?name="+id+"'>编辑</a>";
					str += "<button  onclick='del(\"" +id+"\")'>删除</button>";
					str += "</td></tr>";
	            	$('#cakePageList').append(str);
				}
				
			}
		});
	}
	
	//单个删除
	$().ready(function() {
		getPageData(0,0);
	})
	function del(id) {
		var obj = {
			"id" : id
		}
		$.ajax({
			//填写配置选项
			async:true,//默认开启异步
			url:"/cake/productDelete",//请求地址
			type:"post",//请求类型
			data:obj,//请求参数
			dataType:"json",//响应数据格式
			success:function(data) {//成功时执行函数，参数为服务器返回的数据
				window.location.reload();
			}
		});	
	}
	
	//批量删除
	function batchDel() {
		var checkedValues = new Array();
		 $("input[name='mobileos']").each(function() {
             if ($(this).is(':checked')) {
                 checkedValues.push($(this).attr("id"));
             }
         });
		
		 console.log(checkedValues);
		 $.ajax({
				//填写配置选项
				async:true,//默认开启异步
				url:"/cake/productBatchDelete",//请求地址
				type:"post",//请求类型
				data:{"List[]":checkedValues},//请求参数
				dataType:"json",//响应数据格式
				success:function(data) {//成功时执行函数，参数为服务器返回的数据
					window.location.reload();
				}
			});	
	}

</script>
</html>